<template>
  <div>
    <el-dialog :title="formtype==1?'新增批量排班':'编辑批量排班'" @close='cancel' class="el_dialog_pro1" width='897px' :visible.sync="dialogFormVisible">
      <div class="dialog_body EditCMBox">
        <el-form :model="listfrom" :rules="rules" ref="ruleForm" label-position='left'>
        <el-row>
          <el-col :span="12" class="el_col ">
            <el-form-item label="开始结束时间" prop="StartDate" label-width="120px">
              <el-date-picker
                v-model="value"
                :disabled="formtype == 3"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="daterange"
                class="time_picker_defin time_picker_disable"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el_col ">
            <el-form-item label="采用班次" prop="ShiftId" :label-width="formLabelWidth">
              <el-select class="select_border_bottom select_border_bottom" :disabled="formtype == 3" v-model="listfrom.ShiftId" placeholder="请选择班次">
                <el-option
              :label="item.Name"
              :value="item.Id"
              v-for="(item, index) in tableData"
              :key="index"
            ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="el_col ">
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input :disabled="formtype == 3" class="textarea_border_bottom input_textarea_disabled" v-model="listfrom.Desc" type="textarea" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
        <div class="el_tabs_pro">
          <el-button type="primary" @click="add" class="add_btn" v-if="formtype != 3" size="small">新增</el-button>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="覆盖职员" name="first">
                <div class="contact_list">
                  <el-tree
                    :data="data2"
                    show-checkbox
                    class="disable_tree"
                    ref="tree1"
                    default-expand-all
                    node-key="Id"
                    :default-checked-keys='treedata'
                    :props="defaultProps">
                  </el-tree>
                </div>
              </el-tab-pane>
            </el-tabs>
        </div>
      </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" v-if="formtype != 3" @click="commit">确 定</el-button>
        </div>
</el-dialog>
<rosterpop ref="rosterpop"></rosterpop>
  </div>
</template>

<script>
var occupancyDisplay = {
  template: `<div>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
  
  </div>`,
  props: ['row'],
  created() {
    },
  methods: {
    shenhDetail(row) {
      this.$emit('shenh-detail', row);
      // console.log(this.row,'1111111');
      
    },
    seeDetail(row) {
      this.$emit('see-detail', row);
      // console.log(this.row,'1111111');
      
    }
  }
};
var that;
import rosterpop from './rosterpop'
  export default {
    data() {
      return {
        dialogFormVisible:false,
        loading:false,
        disable:false,
        formtype:1,
        tbasindex:0,
        value:[],
        tableData:[],
        treedatamodel:[],
        defaultProps: {
          children: 'Children',
          label: 'Name'
        },
        data2: [],
        rules: {
          StartDate: [
            { required: true, message: '请选择时间', trigger: 'blur' },
          ],
          ShiftId: [
            { required: true, message: '请选择班次', trigger: 'blur' },
          ],
          },
        treedata: [],
       listfrom:{
        "StartDate":'',
        "EndDate":'',
        "ShiftId":'',
        "Desc":'',
        "StaffId":''
      },
        activeName2:'first',
        formLabelWidth:'100px',
      }
    },
    components:{
      rosterpop,
    },
    created() {
      that = this;
      this.getoptiondata();
    },
    watch: {
    "value":function (params) {
      this.listfrom.StartDate = params[0];
      this.listfrom.EndDate = params[1];
    },
    "$store.state.Humanmanage.QueryStaffTree": function (data) {
      this.treedatamodel = data.ReturnData;
      this.data2 = this.getdisabletree(JSON.parse(JSON.stringify(this.treedatamodel)));
    },
    "$store.state.Humanmanage.QueryShift": function (data) {
      this.tableData = data.ReturnData.Data;
    },
    "$store.state.Humanmanage.SaveStaffShiftP": function (data) {
       this.$message({
            type: 'success',
            message: '操作成功!'
          });
    this.cancel();
    this.$parent.getlistdata();
    },
    },
    methods: {
      getdisabletree(array){
        for (let index = 0; index < array.length; index++) {
          let item = array[index];
          item.disabled = true;
          if (item.Children) {
            this.getdisabletree(item.Children);
          }
        }
        return array;
      },
      cancel(){
        this.listfrom={
        "StartDate":'',
        "EndDate":'',
        "ShiftId":'',
        "Desc":'',
        "StaffId":''
      },
      this.$refs.tree1.setCheckedKeys([]);
      this.value = [];
      this.treedata = [];
        this.dialogFormVisible = false;
      },
      commit(){
        let data = this.gettreedata();
        console.log(data.toString());
        this.listfrom.StaffId = data.toString();
         this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (!this.listfrom.StaffId) {
              this.$message({
                type: 'error',
                message: '请选择职员'
              });
              return
            }
            let obj = {
              "MN": "SaveStaffShiftP",
              "RequestId": 1,
              "UserId": 1,
              "DataContent": this.listfrom
            }
            this.MIX_send(obj);
          } else {
            return false;
          }
        });
      },
      onSelected(data){
        // this.dialogFormVisible=false
        console.log(data);
      },
      handleClick(data){
        // this.dialogFormVisible=false
        // console.log(data.index);
        this.tbasindex = data.index;
      },
      setkey(arr){
        if (arr.length) {
        console.log('object');
        setTimeout(()=>{
          this.$refs.tree1.setCheckedKeys(arr);
        },10)
        }
      },
      add(){
        if (this.tbasindex == 0) {
          this.$refs.rosterpop.data2 = this.treedatamodel;
          this.$refs.rosterpop.setkeystwo(this.gettreedata());
          this.$refs.rosterpop.dialogFormVisible = true;
        }
      },
      gettreedata(){
        let data = this.$refs.tree1.getCheckedKeys()
          let dataarr = [];
          if (data.length) {
            data.forEach((item,index,arr) => {
              if (item) {
                dataarr.push(item);
              }
            });
          }
          return dataarr
      },
      getoptiondata() {
      let obj = {
        "MN": "QueryShift",
        "RequestId": 1,
        "UserId": 1,
        "DataContent": {
          "IsStop": '1'
        }
      }
      this.MIX_send(obj);
      let obj1 = {
        "MN": "QueryStaffTree",
        "RequestId": 1,
        "UserId": 1,
        "DataContent": {}
      }
      this.MIX_send(obj1);
    },
    },
  }
</script>

<style lang="less" scoped>
.dialog_body{
  width: 100%;
  max-height:60vh;
  overflow-y: scroll;

}
.pad_left{
  padding-left: 15px;
}
.el_tabs_pro{
  margin-top: 10px;
  width: 100%;
  position: relative;
}
.add_btn{
  position: absolute;
  top: 5px;
  right: 0px;
  z-index: 12;
}
.contact_list{
  width: 100%;
  // height: 200px;
  // overflow-y: scroll;
}
</style>